<template>
  <v-app id="inspire">
    <v-content>
      <v-container fluid>
        <v-snackbar
          v-model="snackbar"
        >
          {{ text }}
          <v-btn
            color="pink"
            text
            @click="snackbar = false"
          >
            Close
          </v-btn>
        </v-snackbar>
        <v-row>
          <v-col>
        <h1 style="text-align: center">Invite PC Members</h1>
        <v-btn large >{{meetingName}}</v-btn>
          </v-col>
        </v-row>
        <v-row>
          <v-col>
        <v-autocomplete
          v-model="selectList"
          :disabled="isUpdating"
          :items="users"
          filled
          chips
          color="blue-grey lighten-2"
          label="Select"
          item-text="fullname"
          item-value="name"
          multiple
        >
          <template v-slot:selection="data">
            <v-chip
              v-bind="data.attrs"
              :input-value="data.selected"
              @click="data.select"
              >
              {{ data.item.name }}
            </v-chip>
          </template>
          <template v-slot:item="data">
            <template >
              <v-list-item-content>
                <v-list-item-title v-html="data.item.name" :disabled="data.item.checkbox"></v-list-item-title>
                <v-list-item-subtitle v-html="data.item.affiliation"></v-list-item-subtitle>
                <v-list-item-subtitle v-html="data.item.email"></v-list-item-subtitle>
                <v-list-item-subtitle v-html="data.item.region"></v-list-item-subtitle>
              </v-list-item-content>
            </template>
          </template>
        </v-autocomplete>
          </v-col>
        </v-row>
        <v-btn @click="invite">Send Invitation</v-btn>
        <side-bar></side-bar>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
import store from '../store'
import CardTest from './CardTest'
import SideBar from './Components/SideBar'
export default {
  name: 'InviteUsers',
  components: {
    SideBar,
    CardTest
  },
  data () {
    const generateData = _ => {
      const data = []
      this.$axios.post('/notInvitedUsers', this.$route.params.id)
        .then(resp => {
          if (resp != null) {
            var response = resp.data
            response.forEach((user, index) => {
              if (user.username === 'admin' || user.username === store.state.userName) {
                return true
              }
              data.push({
                name: user.username,
                fullname: user.fullname,
                affiliation: user.affiliation,
                email: user.email, // 无奈之举！后续可以把 key 还原为 index，通过 index map 到 label
                region: user.region,
                checkbox: user.username === store.state.userName || user.username === 'admin'
              })
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
      return data
    }
    const srcs = {
      1: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',
      2: 'https://cdn.vuetifyjs.com/images/lists/2.jpg',
      3: 'https://cdn.vuetifyjs.com/images/lists/3.jpg',
      4: 'https://cdn.vuetifyjs.com/images/lists/4.jpg',
      5: 'https://cdn.vuetifyjs.com/images/lists/5.jpg'
    }
    return {
      users: generateData(),
      meetingName: this.$route.params.id,
      selectList: [], // selectList: [1], 效果是第2个条目自动在右边 => selectList v-model
      snackbar: false,
      text: '',
      autoUpdate: true,
      friends: [],
      isUpdating: false,
      name: 'Midnight Crew',
      people: [
        { header: 'Group 1' },
        { name: 'Sandra Adams', group: 'Group 1', avatar: srcs[1] },
        { name: 'Ali Connors', group: 'Group 1', avatar: srcs[2] },
        { name: 'Trevor Hansen', group: 'Group 1', avatar: srcs[3] },
        { name: 'Tucker Smith', group: 'Group 1', avatar: srcs[2] }
      ]
    }
  },
  methods: {
    remove (item) {
      const index = this.selectList.indexOf(item.fullname)
      if (index >= 0) this.selectList.splice(index, 1)
    },
    openApplyPage: function () {
      this.$router.replace({path: '/applyMeeting'})
    },
    invite () {
      console.log(this.selectList)//现在发出去的是fullname，应该发username
      if (this.selectList.length === 0) {
        this.text = '未选择邀请对象'
        this.snackbar = true
      } else {
        this.$axios.post('/invite', {
          chair: store.state.userName,
          meetingName: this.$route.params.id,
          pcMemberNames: this.selectList
        })// 未实现
          .then(resp => {
            if (resp.status === 200 && resp.data.hasOwnProperty('abbrName')) {
              this.text = 'successful Invitation'
              this.snackbar = true

              // alert('successful Invitation')
              this.$router.push('/workspace')
              // location.reload()
            } else {
              this.text = 'invite error'
              this.snackbar = true
              // alert('invite error')
            }
          })
          .catch(error => {
            console.log(error)
          })
      }
    }
  }
}
</script>
